<template>
  <div id="Statistical">
    <el-row id="myrow">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          统计周期：
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
          -
          <el-date-picker v-model="value2" type="date" placeholder="选择日期">
          </el-date-picker>

          所属楼盘：
          <el-select
            v-model="floorValue"
            filterable
            placeholder="请选择楼盘"
            class="floor"
          >
            <el-option
              v-for="item in floorArr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
          商品类型：
          <el-select v-model="goodsValue" filterable class="goodstype">
            <el-option
              v-for="item in goodsType"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            id="sousuo"
            @click="selectFloor"
            >搜索</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-close"
            circle
            @click="chongzhi"
          ></el-button></div
      ></el-col>
    </el-row>

    <!-- 账单 -->

    <el-row class="nav">
      <!-- 按楼盘汇总账单 -->
      <el-tabs v-model="TabsValue" type="border-card" @tab-click="removeTab">
        <el-tab-pane
          v-for="item in mytabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <tab-component
            :is="item.content"
            :mydata="comtableData"
            :tableData="tableData"
            @show="addtabs"
            @show1="addtabs1"
            :data="clickRow"
            @selectDet="seleceDetai"
            :delData="delRow"
            :delData1="delRow1"
            :delData2="delRow2"
            @selectref="selectrefu"
            @selectact="selectacti"
            :nowpage="nowPage"
            @change="changepages"
            :nowpage1="NOWpage"
            :refundfenyeData1="refundfenyeData"
            @chengerefunfenye="chengefyrf"
          ></tab-component>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import StatisticalTable from "../components/StatisticalTable";
import Newtab from "../components/Newtab";
import Deltab from "../components/Deltab";
import * as api from "../utils/api";
export default {
  name: "Statistical",
  components: {
    StatisticalTable,
    Newtab,
    Deltab,
  },
  data() {
    return {
      value1: "",
      value2: "",
      input1: "",
      floorArr: [
        //楼盘
        { id: 1, name: "新希望国际" },
        { id: 2, name: "绿地498" },
      ],
      nowPage: 1, //当前页
      NOWpage: 1,
      floorValue: "",
      goodsType: [
        //商品类型
        { id: 1, name: "团购优惠" },
        { id: 2, name: "房源认购" },
      ],
      goodsValue: "",
      /* 按楼盘汇总账单 */
      tableData: [],
      mytabs: [
        { title: "按楼盘汇总账单", name: "1", content: "StatisticalTable" },
      ],
      TabsValue: "1",
      tabIndex: 1,
      clickRow: [], //商品汇总
      delRow: [], //订单明细
      delRow1: [], //退款明细
      delRow2: [],
    };
  },
  /* 方法 */
  methods: {
    /* 添加新标签 */
    addTabs(mytitle, myname, mycontent) {
      // this.TabsValue = myname;
      let newtabs = ++this.tabIndex + "";
      this.mytabs.push({
        title: mytitle,
        name: myname,
        content: mycontent,
      });
      this.TabsValue = newtabs;
    },
    /* 添加按照商品汇总标签页 */
    addtabs(row) {
      // this.goodsType = row.goods_type;
      // this.floorId = row.real_estate_id;
      // console.log(row);
      this.addTabs("按商品汇总账单", "2", "Newtab");
      this.axios({
        method: "get",
        url: api.GOODSTYPESELECT,
        params: {
          goods_type: row.goods_type,
          real_estate_id: row.real_estate_id,
        },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.clickRow = data.data.data;
        }
      });
    },
    /* 添加明细标签页 */
    seleceDetai(row) {
      console.log(row.listings_id);
      /* 订单明细 退款明细 */
      this.addTabs("账单明细", "3", "Deltab");
      this.axios({
        method: "get",
        url: api.GOODSIDSELECT,
        params: {
          end_time: "",
          goods_id: row.goods_id,
          goods_type: row.goods_type,
          real_estate_id: row.real_estate_id,
          start_time: "",
        },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.delRow = data.data.data;
          this.delRow2 = row;
          // this.delRow1.push(data.data.data[0].refund);
          // console.log(this.delRow1);
          // // console.log(this.delRow2);
        }
      });
      /* 退款明细请求 */
      this.axios({
        method: "get",
        url: api.SELECTREFUNODEA,
        params: {
          dispose_status: "",
          end_time: "",
          goods_id: row.goods_id,
          goods_type: row.goods_type,
          real_estate_id: row.real_estate_id,
          start_time: "",
        },
      }).then((data) => {
        console.log(data);
        this.delRow1 = data.data.data;
        console.log(this.delRow1);
      });
    },
    /* 房源认购 */
    addtabs1(row) {
      this.addTabs("账单明细", "2", "Deltab");
      this.axios({
        method: "get",
        url: api.GOODSIDSELECT,
        params: {
          end_time: "",
          goods_id: row.goods_id,
          goods_type: row.goods_type,
          real_estate_id: row.real_estate_id,
          start_time: "",
        },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.delRow = data.data.data;
          this.delRow2 = row;
          console.log(this.delRow);
          this.axios({
            method: "get",
            url: api.SELECTREFUNODEA,
            params: {
              dispose_status: "",
              end_time: "",
              goods_id: row.goods_id,
              goods_type: row.goods_type,
              real_estate_id: row.real_estate_id,
              start_time: "",
            },
          }).then((data) => {
            console.log(data);
            this.delRow1 = data.data.data;
          });
        }
      });
    },
    /* 删除 */
    removeTab() {
      // console.log(this.TabsValue);
      if (this.TabsValue == 1) {
        /* 清空数组的第2、3项 */
        this.mytabs.splice(1, 2);
        this.tabIndex = 1;
      } else if (this.TabsValue == 2) {
        this.mytabs.splice(2, 1);
        this.tabIndex = 2;
      }
    },
    /* 退款明细 跳转 */
    selectrefu(data) {
      // console.log(data);
      this.$router.push({
        path: "/Home/Homemin/Refund",
        query: { row: data },
      });
    },
    /* 订单明细跳转 */
    selectacti(data) {
      // console.log(data);
      this.$router.push({
        path: "/Home/Homemin/OrderManage",
        query: { row: data },
      });
    },
    /* 打开页面时请求数据 */
    selectFloorData() {
      this.axios({
        method: "get",
        url: api.FLOORSELECT,
        params: {
          goods_type: "",
          limit: 8,
          page: 1,
          real_estate_name: "",
          statisticsEnd: "",
          statisticsStart: "",
        },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.tableData = data.data.data;
        }
      });
    },
    /* 修改当前页 */
    changepages(data) {
      this.nowPage = data;
    },
    chengefyrf(data) {
      this.NOWpage = data;
    },
    /* 搜索 */
    selectFloor() {
      // console.log(this.goodsValue);
      // console.log(this.floorValue);
      this.axios({
        method: "get",
        url: api.FLOORSELECT,
        params: {
          goods_type: this.goodsValue,
          limit: 1,
          page: 1,
          real_estate_name: this.floorValue,
          statisticsEnd: "",
          statisticsStart: "",
        },
      }).then((data) => {
        // console.log(data);
        if (data.data.code == 200) {
          this.tableData = data.data.data;
        }
      });
    },
    /* 重置 */
    chongzhi() {
      this.floorValue = "";
      this.goodsValue = "";
      this.selectFloorData();
    },
  },
  computed: {
    /* 分页 */
    comtableData() {
      let start = (this.nowPage - 1) * 1;
      let end = start + 1;
      return this.tableData.slice(start, end);
    },
    /* 退款明细分页 */
    refundfenyeData() {
      let start = (this.NOWpage - 1) * 10;
      let end = start + 10;
      return this.delRow1.slice(start, end);
    },
  },
  created() {
    this.selectFloorData();
  },
};
</script>

<style scoped>
.floor {
  width: 120px;
}
.goodstype {
  width: 120px;
}

.nav {
  margin-top: 10px;
}
#sousuo {
  margin-left: 10px;
}
#myrow {
  margin-top: 10px;
  text-align: center;
}
#Statistical {
  width: 98%;
  margin: 0 auto;
}
</style>